<template>
  <div class="container setting">
    <img v-if="fileSpace" mode="widthFix" class="width-375 height-150"
      :src="fileSpace + '/images/feedback-pic.png'"/>
    <div class="panel pad-l-7 pad-r-7 mar-t-10">
      <div class='flex v-align-c border-b pad-t-10 pad-b-10'>
        <div class="flex-item font-14 pad-l-9">陛下，何事让您心烦？</div>
      </div>
      <div class="pad-12 radio-box">
        <van-radio-group v-model="feedback.problemId" @change="changeRadio">
          <div class="radio-bar pad-t-8 pad-b-8 font-12" v-for="(item,index) in radioData" :key="index">
            <van-radio :name="item.problemId" checked-color="#f8c400">{{item.problemName}}</van-radio>
          </div>
        </van-radio-group>
      </div>
    </div>
    <div class="panel mar-t-10">
      <div class="border-radius-5 mar-t-15 mar-b-15 mar-l-15 mar-r-15">
        <textarea v-model="feedback.content" placeholder="简单描述情况，微臣好尽快为您分忧~"/>
      </div>
    </div>
    <div class="panel mar-t-10">
      <div class="border-radius-5 mar-t-10 mar-b-10 mar-l-15 mar-r-15">
        <input v-model="feedback.phone" placeholder="陛下，您手机号多少来着呢？"/>
      </div>
    </div>
    <div class="panel pad-l-7 pad-r-7 mar-t-10 pad-b-15">
      <div class='flex v-align-c pad-t-10 pad-b-10'>
        <div class="flex-item font-14 pad-l-9">上传截图</div>
      </div>
      <div class="pad-l-10">
        <div>
          <label class="tag-style border-all border-radius-5 width-78 height-78 mar-b-10 mar-r-10"
            v-for="(item, index) in picUrl" :key="index"
            @click="uploadPic(index)">
            <img v-if="fileSpace" class="width-78 height-78 border-radius-5" :src="item.imgUrl"/>
          </label>
          <label v-if="picUrl.length < 9" class="tag-style border-all border-radius-5 width-78 height-78 add-pic mar-b-10"
            @click="uploadPic('new')">
            <icon class="iconfont icon-jiahao"></icon>
          </label>
        </div>
      </div>
    </div>
    <div class="mar-10 pad-t-12 pad-b-12">
      <div v-if="!disaleSave" @click="addFeedback">
        <div class="get-form-id">
          <get-form-id :width="330" :height="50"></get-form-id>
        </div>
        <button size="default" class="primary-button submit border-radius-5">提交</button>
      </div>
      <div v-else>
        <button size="default" class="primary-button submit border-radius-5">提交</button>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    getMemberInfo
  } from '@/api/home'
  import {
    addFeedback, listProblem
  } from '@/api/personal'
  import GetFormId from '@/components/GetFormId'

  export default {
    components: { GetFormId },
    data() {
      return {
        radioData: [],
        feedback: {
          userId: '',
          userType: 1,
          problemId: '',
          phone: '',
          phoneType: '',
          problemSource: 1,
          content: ''
        },
        from: null,
        picUrl: [],
        disaleSave: false
      }
    },
    onLoad() {
      this.$pt.removeStorageSync('__picUrl__')
    },
    onHide() {
      this.$pt.removeStorageSync('__picUrl__')
    },
    onShow() {
      this.getMemberInfo()
      let picUrl = this.$pt.getStorageSync('__picUrl__')
      if (picUrl) {
        if (picUrl !== 'none') {
          if (picUrl.from === 'new') {
            this.picUrl.push({'imgUrl': picUrl.url})
          } else {
            let i = Number(picUrl.from)
            this.picUrl[i].imgUrl = picUrl.url
          }
          this.feedback.feedbackImageDTOS = this.picUrl
        }
      } else {
        this.picUrl = []
        this.feedback = {
          userId: '',
          userType: 1,
          problemId: '',
          phone: '',
          phoneType: '',
          problemSource: 1,
          content: ''
        }
      }
      this.getSystemInfo()
      this.listProblem()
      this.disaleSave = false
    },
    methods: {
      uploadPic(val) {
        this.$pt.navigateTo({url: '/pages/personal/feedback/picture/main?from=' + val})
      },
      getSystemInfo() {
        let that = this
        this.$pt.getSystemInfo({
          success(res) {
            that.feedback.phoneType = res.brand + ' ' + res.model
          }
        })
      },
      listProblem() {
        listProblem(this.getCustomerId).then((response) => {
          if (response.isError) return
          this.radioData = response.data
        }).catch(() => {
        })
      },
      changeRadio(event) {
        this.feedback.problemId = event.mp.detail
      },
      getMemberInfo() {
        getMemberInfo(this.getCustomerId).then((response) => {
          if (response.isError) return
          const member = response.data
          this.feedback.userId = member.memberId
        }).catch(() => {
        })
      },
      saveFeedbackInfo() {
        this.feedback = this.feedback
      },
      addFeedback() {
        this.disaleSave = true
        if (this.feedback.problemId === '') {
          this.$utils.showToast({ title: '请选择反馈类型' })
          this.disaleSave = false
          return
        }
        if (this.feedback.content === '') {
          this.$utils.showToast({ title: '请填写反馈内容' })
          this.disaleSave = false
          return
        }
        if (this.feedback.phone === '') {
          this.$utils.showToast({ title: '请填写反馈手机号码' })
          this.disaleSave = false
          return
        }
        if (!(/^1\d{10}$/.test(this.feedback.phone))) {
          this.$utils.showToast({ title: '请填写正确的手机号！' })
          this.disaleSave = false
          return
        }
        addFeedback(this.feedback).then((response) => {
          if (response.isError) return
          this.$utils.showToast({ title: '提交反馈成功' })
          setTimeout(() => {
            this.disaleSave = false
            this.$pt.navigateBack({ delta: -1 })
          }, 300)
        }).catch(() => {
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .add-pic{
    text-align: center;
    .iconfont{
      margin-top: 20px;
      display: inline-block;
      vertical-align: middle;
    }
  }
  .tag-style{
    display: inline-block;
    vertical-align: top;
  }
  .radio-box{
    &:after{
      content: '';
      display: block;
      clear: both;
      font-size: 0;
    }
    .radio-bar{
      width: 50%;
      float: left;
    }
  }  
  .panel{
    box-shadow: 0 0 0;
  }
  .setting input {
    width: 100%;
  }
  .setting textarea {
    width: 100%;
    height: 90px;
  }
  .div-input {
    border-bottom: 0.5px solid #d9d9d9;
    margin-left: 20px;
    padding-top: 6px;
    padding-bottom: 6px;
  }
  .div-input:last-child {
    border-bottom: 0;
  }
  .get-form-id {
    position: absolute;
    width:330px;
    height:50px;
    z-index: 999;
  }
  .submit{
    background: linear-gradient(to right, #ff8e4b, #ff4e25);
    color: white;
  }
</style>
